<script setup>
import { ref } from "vue";

const setMealPopup = ref(false);

const handleAddMeat = () => {
	setMealPopup.value = true;
}
</script>

<template>
	<view class="set_meal">
		<view class="meal_list">
			<view class="meal_item" v-for="item in 10" :key="item">
				<image class="icon_coin" src="/static/image/home/settings/coin.png" mode="aspectFill"  />
				<view class="coin_content">
					<text>1元 = 1币 ，赠送0币</text>
					<text>您可以通过添加真实姓名和身份证进行认证</text>
				</view>
				<view class="right">
					<text>编辑</text>
					<image class="icon_arrow" src="/static/image/form/right_arrow.png" mode="aspectFill" />
				</view>
			</view>
		</view>
		<view class="footer" @click="handleAddMeat">
			<text>添加购币套餐</text>
		</view>
		
		<!-- 添加/编辑购币套餐弹窗 -->
		<u-popup :show="setMealPopup" mode="center" :round="16">
			<view class="set_meal_popup">
				<view class="title">套餐添加</view>
				<view class="row">
					<text>售价</text>
          <input placeholder="请输入金额"/>
				</view>
				<view class="row">
					<text>充值</text>
				  <input placeholder="请输入充值币额"/>
				</view>
				<view class="row">
					<text>赠送</text>
				  <input placeholder="请输入赠送币额"/>
				</view>
				<view class="row">
					<text>套餐名称</text>
				  <input placeholder="请输入活动标题"/>
				</view>
				<view class="row">
					<text>是否显示</text>
					<switch class="switch" color="#FF4638" />
				</view>
				<view class="row">
					<text>是否推荐</text>
					<switch class="switch" color="#FF4638" />
				</view>
				<view class="row">
					<text>上架终端</text>
				  <checkbox-group style="width: 398rpx;">
				    <label>
				      <checkbox color="#ff9832" />小程序
				    </label>
				    <label style="margin-left: 48rpx;">
				      <checkbox color="#ff9832" />收银系统
				    </label>
				  </checkbox-group>
				</view>
				<view class="attention">注意：请与主板厂家确认主板是否支持自定义套餐</view>
				<view class="setting">更多设置</view>
				<view class="popup_footer">
					<view @click="setMealPopup = false">取消</view>
					<view >保存</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<style lang="scss">
.set_meal {
	box-sizing: border-box;
	padding-bottom: 166rpx;
	background: #fff;
	.meal_list {
		width: 750rpx;
		box-sizing: border-box;
		padding: 36rpx 0 0;
		.meal_item {
			width: 686rpx;
			background: #F6F7FB;
			border-radius: 8rpx;
			box-sizing: border-box;
			padding: 32rpx 34rpx;
			display: flex;
			justify-content: space-between;
			margin: 0 auto 36rpx;
			.icon_coin {
				width: 64rpx;
				height: 64rpx;
			}
			.coin_content {
				flex: 1;
				margin: 0 24rpx;
				text {
					display: block;
					&:nth-of-type(1) {
						font-weight: 500;
						font-size: 28rpx;
						line-height: 33rpx;
						color: #303030;
					}
					&:nth-of-type(2) {
						font-size: 20rpx;
						line-height: 23rpx;
						color: #969699;
						margin-top: 8rpx;
					}
				}
			}
			.right {
				display: flex;
				align-items: center;
				text {
					font-size: 24rpx;
					line-height: 32rpx;
					color: #FF9832;
					margin-right: 8rpx;
				}
				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}
	.footer {
		position: fixed;
		z-index: 99;
		bottom: 0;
		width: 750rpx;
		height: 166rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.05);
		box-sizing: border-box;
		padding: 10rpx 32rpx 0;
		text {
			width: 686rpx;
			height: 80rpx;
			background: rgba(255, 70, 56, 0.1);
			border-radius: 40rpx;
			font-size: 28rpx;
			line-height: 33rpx;
			color: #FF4638;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.set_meal_popup {
		padding: 40rpx 0 0;
		width: 686rpx;
		.title {
			font-weight: 500;
			font-size: 32rpx;
			line-height: 38rpx;
			letter-spacing: 1px;
			color: #353535;
			text-align: center;
		}
		.row {
			width: 100%;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 0 76rpx 0 0;
			margin-top: 28rpx;
			text {
				flex: 1;
				text-align: right;
				margin-right: 40rpx;
				font-size: 24rpx;
				line-height: 28rpx;
				color: #353535;
			}
			input {
				width: 398rpx;
				height: 56rpx;
				background: #F2F2F2;
				border-radius: 8rpx;
				font-size: 24rpx;
				line-height: 32rpx;
				color: #646466;
				box-sizing: border-box;
				padding: 0 24rpx;
			}
			switch {
				width: 398rpx;
				transform: scale(0.8);
				transform-origin: left;
			}
			checkbox {
				transform: scale(0.6);
				transform-origin: left;
				margin-right: -14rpx;
			}
			label {
				font-size: 24rpx;
			}
		}
		.attention {
			width: 686rpx;
			height: 80rpx;
			background: #FFEFE6;
			font-size: 24rpx;
			line-height: 32rpx;
			color: #FF6619;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 28rpx 0 22rpx;
		}
		.setting {
			font-size: 24rpx;
			line-height: 28rpx;
			color: #FF9832;
			text-align: center;
			margin-bottom: 30rpx;
		}
		.popup_footer {
			width: 100%;
			height: 112rpx;
			border-top: 2rpx solid rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: center;
			view {
				height: 100%;
				flex: 1;
				font-weight: 500;
				font-size: 32rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				&:last-child {
					color: #FF4638;
					border-left: 2rpx solid rgba(0, 0, 0, 0.1);
				}
			}
		}
	}
}
.outer {
  padding: 0 32rpx;
}
.list {
  .item {
    padding: 32rpx 34rpx;
    background: #F6F7FB;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 36rpx auto;
    .icon {
      width: 64rpx;
      margin-right: 24rpx;
    }
    .center {
      flex: 1;
      h3 {
        font-size: 28rpx;
        color: #303030;
        margin-bottom: 8rpx;
      }
      p {
        font-size: 20rpx;
        color: #969699;
        width: 380rpx;
      }
    }
    .right {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #FF9832;
      .arrow {
        width: 24rpx;
        margin-left: 5rpx;
      }
    }
  }
}
.action {
  background: #fff;
  padding: 10rpx 32rpx;
  position: fixed;
  bottom: 0;
  width: 100%;
  box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(0,0,0,0.05);
  box-sizing: border-box;
  .btn {
    width: 100%;
    border: none;
    &:after {
      border: none;
    }
    background: #ffeceb;
  }
}
:deep(.uni-dialog-content) {
  padding: 20px 0 0!important;
  width: 100%;
}
.dialog-form {
  width: 100%;
  .dialog-form-item {
    padding: 0 40rpx;
    .input {
      width: 398rpx;
    }
  }
}
.tip {
  text-align: center;
}
.more {
  font-size: 24rpx;
  color: #FF9832;
  text-align: center;
  margin: 22rpx 0;
}
</style>
